<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple writer example</title>
  </head>
  <body>
    <h1>Simple writer example</h1>

    <h2>Results</h2>

    <ul></ul>

    <script>
      const list = document.querySelector("ul");
      async function sendMessage(message, writableStream) {
        // defaultWriter is of type WritableStreamDefaultWriter
        const defaultWriter = writableStream.getWriter();
        const encoder = new TextEncoder();
        const encoded = encoder.encode(message);
        try {
          for (const chunk of encoded) {
            await defaultWriter.ready;
            await defaultWriter.write(chunk);
            console.log("Chunk written to sink.");
          }
          // Call ready again to ensure that all chunks are written
          // before closing the writer.
          await defaultWriter.ready;
          await defaultWriter.close();
          console.log("All chunks written");
        } catch (err) {
          console.log("Error:", err);
        }
      }
      const decoder = new TextDecoder("utf-8");
      const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
      let result = "";
      const writableStream = new WritableStream(
        {
          // Implement the sink
          write(chunk) {
            return new Promise((resolve, reject) => {
              const buffer = new ArrayBuffer(1);
              const view = new Uint8Array(buffer);
              view[0] = chunk;
              const decoded = decoder.decode(view, { stream: true });
              const listItem = document.createElement("li");
              listItem.textContent = `Chunk decoded: ${decoded}`;
              list.appendChild(listItem);
              result += decoded;
              resolve();
            });
          },
          close() {
            const listItem = document.createElement("li");
            listItem.textContent = `[MESSAGE RECEIVED] ${result}`;
            list.appendChild(listItem);
          },
          abort(err) {
            console.log("Sink error:", err);
          },
        },
        queuingStrategy
      );
      sendMessage("Hello, world.", writableStream);
    </script>
  </body>
</html>
